<template>
    <el-container>
        <el-aside width="20%">
            <el-container>
                <el-header>
                    <div class="right-panel">
                        <div class="right-panel-search">
                            <el-input v-model="search.title_keywords" placeholder="请输入设备关键词" clearable @change="upsearch"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="table" :apiObj="apiObj" highlight-current-row @row-click="selectionChange" stripe remoteSort remoteFilter border>
                        <el-table-column label="设备部门" prop="dept_name" align="center"></el-table-column>
                        <el-table-column label="设备编码" prop="code" align="center"></el-table-column>
                        <el-table-column label="设备名称" prop="title" align="center"></el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-date-picker v-model="search.fdatetime" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" />
                        <el-button type="primary" icon="el-icon-search" @click="getStatus"></el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                    </div>
                </div>
            </el-header>
            <el-header>
                <div class="operate">
                    <div class="total" v-for="(item, index) in operate" :key="index" :class="item.state_id == state_id ? 'background' : ''">
                        <!--  @click="filterBtn(item,index)" -->
                        <sc-status-indicator :type="item.src"></sc-status-indicator>
                        <span class="font">{{ item.state }}{{ item.total }}</span>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <!-- <scEcharts :option="option"></scEcharts> -->
                <div id="main" style="height:650px;width:1450px"></div>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import scEcharts from "@/components/scEcharts";
import * as echarts from 'echarts';
export default {
    components: { scEcharts },
    name: 'selectFilter',
    data() {
        return {
            dialog: {
                show: false
            },
            apiObj: this.$API.jiankong.correspond.list,
            search: {
                fdatetime: [],
                code: null,
            },
            option: {
            },
            operate: [
                { state: '运行', src: 'success' },
                { state: '准备', src: 'primary' },
                { state: '空闲', src: 'warning' },
                { state: '报警', src: 'danger' },
                { state: '维修', src: 'warning' },
                { state: '关机', src: 'info' },
            ],
            selection: [],
        };
    },
    mounted() {
        this.getMonth()
    },
    methods: {
        getStart() {
            const today = new Date();
            return this.getFormattedDate(new Date(today.getFullYear(), today.getMonth(), 1));
        },
        getEnd() {
            const today = new Date();
            const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
            return this.getFormattedDate(lastDay);
        },
        getMonth() {
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.search.fdatetime[0] = formattedFirstDay
            this.search.fdatetime[1] = formattedLastDay
        },
        getFormattedDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        table_set(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
        },
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
        async getStatus() {
            let query = {
                fdatetime: this.search.fdatetime,
                code: this.search.code,
            }
            var res = await this.$API.jiankong.correspond.status.post(query);

            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            var data = res.data.data;

            // var dataCount = 10;
            var startTime = res.data.start_time;
            var categories = res.data.categories;
            // var types = res.data.types;
            // Generate mock data
            // categories.forEach(function (category, index) {
            //     var baseTime = startTime;
            //     for (var i = 0; i < dataCount; i++) {
            //         var typeItem = types[Math.round(Math.random() * (types.length - 1))];
            //         var duration = Math.round(Math.random() * 10000);
            //         data.push({
            //             name: typeItem.name,
            //             value: [index, baseTime, (baseTime += duration), (baseTime += duration)],
            //             itemStyle: {
            //                 normal: {
            //                     color: typeItem.color
            //                 }
            //             }
            //         });
            //         baseTime += Math.round(Math.random() * 2000);
            //     }
            // });
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.8;
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: api.style()
                    }
                );
            }
            option = {
                tooltip: {
                    formatter: function (params) {
                        return params.value[3];
                    }
                },
                title: {
                    text: '设备状态',
                    left: 'center'
                },
                dataZoom: [
                    {
                        type: 'slider',
                        filterMode: 'weakFilter',
                        showDataShadow: false,
                        top: 600,
                        labelFormatter: ''
                    },
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    }
                ],
                grid: {
                    height: 550
                },
                xAxis: {
                    min: startTime,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            return Math.max(0, ((val - startTime) / 1000 / 3600).toFixed(0));
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: categories
                },
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: data
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        selectionChange(selection) {
            this.search.code = selection.code
            this.getStatus()
        },
    },
};
</script>

<style scoped lang="scss">
.operate {
    display: flex;
    align-items: center;

    div {
        display: flex;
        align-items: center;
        border-radius: 30px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        padding: 9px 17px;
        margin: 0 5px;
        cursor: pointer;

        .font {
            margin-left: 5px;
        }
    }
}
</style>
